import React, { memo } from 'react'
import { FC, ReactNode } from 'react'
import { TopRankingWrapper } from './style'
import AreaHeader from '@/components/area-header'
import { useAppSelector } from '@/store'

interface IProps {
  children?: ReactNode
}

const TopRanking: FC<IProps> = () => {
  const { rankings } = useAppSelector((state) => ({
    rankings: state.recommend.ranking
  }))
  return (
    <TopRankingWrapper>
      <AreaHeader title="榜单" moreLink="/discover/ranking" />
      <div className="content">
        {
          rankings.map((item) => {
            return (
              <div className="item" key={item.id}>
                {item.name}
              </div>
            )
          })
        }
      </div>
    </TopRankingWrapper>
  )
}

export default memo(TopRanking)
